<template>
<div>
  <div class="title-name"><span>客户管理</span></div>
  <div style="padding:15px;">
    <div>
      <span><el-date-picker v-model="queryDate" size="mini" :clearable="false"></el-date-picker></span>
      <span style="margin-left:6px;">
        <el-select ref="userSelector" v-model="queryUserId" size="mini" @change="selectUserChange">
          <el-option v-for="user in userList" :value="user.id" :label="user.admin_name" :key="user.id"></el-option>
        </el-select>
      </span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryCustomer">查询</el-button></span>
      <span style="margin-left:6px;"><el-button type="warning" size="mini" :disabled="queryUserId<1" @click="toAddCustomer">添加</el-button></span>
    </div>
    <div style="margin-top:6px;">
      <div style="color:#FF430D;">在改变客户归属时，请先修改原归属条目有效期，再增加一条新记录即可！</div>
      <el-table border stripe :data="customerList">
        <el-table-column prop="admin_name" label="姓名" width="110px"></el-table-column>
        <el-table-column prop="investor_code" label="客户号" width="120px"></el-table-column>
        <el-table-column prop="investor_name" label="客户名" width="200px"></el-table-column>
        <el-table-column prop="open_date" label="开户日期" width="110px"></el-table-column>
        <el-table-column prop="expire" label="有效期" width="110px"></el-table-column>
        <el-table-column width="110px">
          <template slot-scope="scope">
            <el-button type="text" @click="toEditCustomer(scope.row)">编辑</el-button>
            <el-button type="text" @click="toEditCommission(scope.row)">添加提成</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <div class="title-name"><span>权益查询</span></div>
  <div style="padding:15px;">
    <!-- 客户权益查询显示 -->
    <div>
      <span><el-date-picker v-model="rightDateRange" type="daterange" size="mini" style="width:220px;" :clearable="false"></el-date-picker></span>
        <span style="margin-left:6px;">
          <el-select ref="userSelector" v-model="rightQueryUserId" size="mini">
            <el-option v-for="user in userList" :value="user.id" :label="user.admin_name" :key="user.id"></el-option>
          </el-select>
        </span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQuerRights">查询</el-button></span>
    </div>
    <div style="margin-top:6px;">
      <el-table border stripe show-summary :data="ringhtDataList">
        <el-table-column prop="create_date" label="日期" width="110px"></el-table-column>
        <el-table-column prop="investor_name" label="客户名称" width="130px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="cash_in" label="入金" width="110px"></el-table-column>
        <el-table-column prop="cash_out" label="出金" width="110px"></el-table-column>
        <el-table-column prop="available_funds" label="可用资金" width="110px"></el-table-column>
        <el-table-column prop="rights" label="期末权益" width="110px"></el-table-column>
      </el-table>
    </div>
  </div>

  <div class="title-name"><span>提成查询</span></div>
  <div style="padding:15px;">
    <!-- 佣金查询显示 -->
    <div>
      <span><el-date-picker v-model="commDateRange" type="daterange" size="mini" style="width:220px;" :clearable="false"></el-date-picker></span>
      <span style="margin-left:6px;">
        <el-select ref="userSelector" v-model="commQueryUserId" size="mini">
          <el-option v-for="user in userList" :value="user.id" :label="user.admin_name" :key="user.id"></el-option>
        </el-select>
      </span>
      <span style="margin-left:6px;"><el-button type="primary" size="mini" @click="toQueryCommission">查询</el-button></span>
    </div>
    <div style="margin-top:6px;">
      <el-table border stripe show-summary :summary-method="commSumMethod" :data="commDataList">
        <el-table-column prop="comm_date" label="日期" width="90px"></el-table-column>
        <el-table-column prop="investor_name" label="客户名称" width="110px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="comm_money" label="净留存" width="110px" align="right"></el-table-column>
        <el-table-column prop="comm_rate" label="比例" width="50px" align="right"></el-table-column>
        <el-table-column prop="comm" label="提成额" width="80px" align="right"></el-table-column>
        <el-table-column prop="interest" label="利息" width="80px" align="right"></el-table-column>
        <el-table-column prop="total_comm" label="总提成" width="80px" align="right"></el-table-column>
        <el-table-column prop="dept_comm" label="部门提成" width="80px" align="right"></el-table-column>
        <el-table-column prop="dept_tax" label="税费(部门)" width="88px" align="right"></el-table-column>
        <el-table-column prop="dept_tax_comm" label="部门税后" width="80px" align="right"></el-table-column>
        <el-table-column prop="per_comm" label="个人提成" width="80px" align="right"></el-table-column>
        <el-table-column prop="per_tax" label="税费(个人)" width="88px" align="right"></el-table-column>
        <el-table-column prop="per_tax_comm" label="个人税后" width="100px" align="right"></el-table-column>
      </el-table>
    </div>
  </div>


  <!-- 添加客户弹窗 -->
  <el-dialog :visible.sync="showAddDialog" title="编辑客户">
    <el-form label-width="80px">
      <el-form-item label="客户归属"><span style="color:#0073FC;">{{ currentUsername }}</span></el-form-item>
      <el-form-item label="客户号"><el-input size="mini" v-model="custObj.investor_code"></el-input></el-form-item>
      <el-form-item label="客户名称"><el-input size="mini" v-model="custObj.investor_name"></el-input></el-form-item>
      <el-form-item label="开户日期"><el-date-picker size="mini" v-model="custObj.open_date"></el-date-picker></el-form-item>
      <el-form-item label="有效期"><el-date-picker size="mini" v-model="custObj.expire"></el-date-picker></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="mini" @click="toSaveCustomer">确定保存</el-button>
    </div>
  </el-dialog>

  <!-- 添加佣金弹窗 -->
  <el-dialog :visible.sync="showAddCommission" title="提成编辑">
    <el-form label-width="80px">
      <el-form-item label="客户归属"><span style="color:#0073FC;">{{ currentUsername }}</span></el-form-item>
      <el-form-item label="资金号"><span style="color:#0073FC;">{{commObj.investor_code}}</span></el-form-item>
      <el-form-item label="计算月份"><el-date-picker size="mini" v-model="commObj.comm_date" :clearable="false"></el-date-picker></el-form-item>
      <el-form-item label="佣金"><el-input size="mini" v-model="commObj.comm_money"></el-input></el-form-item>
      <el-form-item label="利息"><el-input size="mini" v-model="commObj.interest" placeholder="部门抽成前的利息额"></el-input></el-form-item>
      <el-form-item label="提成比例"><el-input size="mini" v-model="commObj.comm_rate"></el-input></el-form-item>
      <el-form-item label="部门比例"><el-input size="mini" v-model="commObj.dept_rate"></el-input></el-form-item>
      <el-form-item label="扣税"><el-input size="mini" v-model="commObj.tax"></el-input></el-form-item>
      <el-form-item label="备注"><el-input size="mini" v-model="commObj.note"></el-input></el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" size="mini" @click="toSaveCommission">确定保存</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
import { datetimeToStr, parseIntegerTime, getYearDatePoint,getMonthDatePoint } from '@/utils/datetimeUtils'
import { getAnalystList } from '@/api/user'
import { addCustomer, getCustomer, addCommission, getCommission,getRights } from '@/api/departmentWork/customer'
export default {
  data(){
    return {
      userList: [],
      queryDate: new Date(),
      queryUserId: 0,
      customerList: [],
      currentUsername: '',

      commDateRange: [],
      commQueryUserId: 0,
      commDataList: [],

      rightDateRange: [],
      rightQueryUserId: 0,
      ringhtDataList: [],

      showAddDialog: false,
      custObj: {
        user_id: null,
        investor_code: '',
        open_date: new Date(),
        investor_name: '',
        expire: new Date(2099,11,31)
      },

      showAddCommission: false,
      commObj: {
        investor_code: '',
        comm_date: new Date(),
        comm_money: null,
        interest: 0,
        comm_rate: 0.15,
        dept_rate: 0.2,
        tax: null,
        note: ''
      }
    }
  },
  mounted() {
    getAnalystList().then(res => {
      this.userList = res.data
      this.userList.unshift({id: 0, admin_name: '全部'})
    })
    this.toQueryCustomer()

    let year = new Date().getFullYear()
    this.commDateRange = getYearDatePoint(year, 'current')

    this.rightDateRange = getMonthDatePoint(new Date(), 'current')
  },
  methods:{
    commSumMethod(param){
      const { columns, data } = param;
      const sums = [];
      const sumColumnIndexes = [2,4,5,6,7,8,9,10,11,12]
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => Number.isNaN(value)) && sumColumnIndexes.indexOf(index)>-1) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!Number.isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] = sums[index].toFixed(2);
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    getUsername(userId){
      let username = ''
      for (let i=0;i<this.userList.length;i++){
        if (this.userList[i].id === userId){
          username = this.userList[i].admin_name
          break
        }
      }
      return username
    },

    selectUserChange(selectId){
      this.currentUsername = this.getUsername(selectId)
    },

    // 准备添加提成
    toEditCommission(row){
      this.currentUsername = this.getUsername(row.user_id)
      this.commObj.investor_code = row.investor_code
      this.showAddCommission = true
    },

    // 保存提成数据
    toSaveCommission(){
      const commData = {
        investor_code: this.commObj.investor_code,
        comm_date: datetimeToStr(this.commObj.comm_date, true, '-'),
        comm_money: this.commObj.comm_money,
        interest: this.commObj.interest,
        comm_rate: this.commObj.comm_rate,
        dept_rate: this.commObj.dept_rate,
        tax: this.commObj.tax,
        note: this.commObj.note
      }
      addCommission(commData).then(res => {
        this.$baseMessage(res.msg, res.code===201?'success':'error')
        this.commObj.comm_money = null
        this.showAddCommission = false
      })
    },

    // 查询客户
    toQueryCustomer(){
      const param = {
        date: datetimeToStr(this.queryDate, true,''),
        user: this.queryUserId
      }
      getCustomer(param).then(res => {
        this.customerList = res.data
      })
    },

    // 准备编辑客户信息
    toEditCustomer(row){
      this.currentUsername = this.getUsername(row.user_id)
      this.custObj.user_id = row.user_id
      this.custObj.investor_code = row.investor_code
      this.custObj.investor_name = row.investor_name
      this.custObj.expire = parseIntegerTime(row.expire)
      this.showAddDialog = true
    },

    // 准备添加客户
    toAddCustomer(){
      this.showAddDialog = true
      this.custObj.user_id = this.queryUserId
      this.custObj.investor_code = ''
      this.custObj.investor_name = ''
    },

    // 添加客户
    toSaveCustomer(){
      const custData = {
        user_id: this.custObj.user_id,
        investor_code: this.custObj.investor_code,
        investor_name: this.custObj.investor_name,
        open_date: datetimeToStr(this.custObj.open_date,true,'-'),
        expire: datetimeToStr(this.custObj.expire,true,'-')
      }
      addCustomer(custData).then(res => {
        console.log(res);
        this.$baseMessage(res.msg, res.code===200?'success':'error')
        this.showAddDialog = false
      })
    },

    // 查询佣金记录
    toQueryCommission(){
      const parmData = {
        user: this.commQueryUserId,
        start: datetimeToStr(this.commDateRange[0], true, ''),
        end: datetimeToStr(this.commDateRange[1], true, '')
      }
      getCommission(parmData).then(res => {
        this.commDataList = res.data
      })
    },

    // 查询权益
    toQuerRights(){
      const paraData = {
        user: this.rightQueryUserId,
        start: datetimeToStr(this.rightDateRange[0], true, ''),
        end: datetimeToStr(this.rightDateRange[1], true, '')
      }
      getRights(paraData).then(res => {
        this.ringhtDataList = res.data
      })
    }

  }
}
</script>

<style scoped lang="scss">
.title-name{
  line-height: 22px;
  background-image:linear-gradient(to right,rgba(39,206,255,1),rgba(193, 237, 255, 1.0),rgba(255,255,255,1));;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  border-left:5px solid #FFAE0D;
  span{
    margin-left:10px;
    color:#fff;
    font-weight:700;
  }
}
</style>
